<template>
  <div>
    <h1 style="text-align:center;">导出</h1>
    <!-- 点击事件 -->
     <el-button type="primary" @click="exportExcel">导出表格</el-button>
        <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
            prop="year"
            label="年份"
            width="180">
        </el-table-column>
        <el-table-column
            prop="number"
            label="毕业人数"
            width="180">
        </el-table-column>
        </el-table>
  </div>
</template>

<script>
//导入请求方法
import {TableData} from '@/request'
//导入 第三方模块 xlsx
import {utils,writeFile} from 'xlsx'
export default {
  data () {
    return {
       tableData:[]  
     }
    },
  methods: {
      //定义方法
      async getTableData() {
       let data = await TableData()
       console.log(data);
       this.tableData = data.data.data
      },
     //导出表格
      exportExcel() {
        //导出操作在这里实现 - 依赖第三方模块： xlsx
        //将组件中的数组数据转成excel需要的数据
        let excleData =this.tableData.map(item => {
           return {
             年份: item.year,
             毕业人数: item.number
           } 
        })
        // console.log(excleData);
        //得到工作表数据
        let sheet = utils.json_to_sheet(excleData)
        //创建工作簿
        let book = utils.book_new()
        //给工作簿添加工作表，并给工作表中放入数据  
        //  第一个 新建的工作簿   第二个得到工作表数据  第三个参数 工作表名字
        utils.book_append_sheet(book,sheet,'毕业年份和人数统计表')

        //将工作簿下载到本地  第一个创建工作簿  第二个 工作表名字
        writeFile(book,'毕业统计.xlsx')
      } 
    },
    created(){
        //调用方法
        this.getTableData()
    }
}
</script>

<style>
    
</style>
